<template>
	<view class="tabbar">
		<view class="tabbar-bg-box">
			<image class="tabbar-bg"
				src="../../static/tabbar/bg.png"
				mode="aspectFill">
			</image>
			<!-- <image class="tabbar-bg" src="bg.png" mode="aspectFill"> -->
			<view class="mid-icon" @tap="midClick">
				<image v-if="role==2||role==3" src="/static/tabbar/dk.png" mode=""></image>
				<image v-else src="/static/tabbar/fb.png" mode=""></image>
				<view v-if="role==2||role==3" class="">
					<view v-if="tabbarIndex!=2" class="dk" >签到</view>
					<view v-else class="dk-select" >签到</view>
				</view>
				<view v-else class="">
					<view v-if="tabbarIndex!=2" class="dk" >发布需求</view>
					<view v-else class="dk-select" >发布需求</view>
				</view>
				
		<!-- 		<image
					src=""
					mode="aspectFill"></image> -->
			</view>
			<view class="tabbar-box">
				<view class="tabbar-item" v-for="v,k in data" :key="k" @tap="tabbarItemClick(v,k)">
					<image class="tabbar-icon" :src="tabbarIndex==k?v.selectedIconPath:v.iconPath" mode="aspectFill">
					</image>
					<view v-if="role==2||role==3" class="">
						
						<view v-if="k==1" class="tabbar-text" :class="tabbarIndex==k?'tabbar-text-select':''">工作</view>
						<view v-else  class="tabbar-text" :class="tabbarIndex==k?'tabbar-text-select':''">{{v.text}}</view>
					</view>
					<view v-else class="">
						<view class="tabbar-text" :class="tabbarIndex==k?'tabbar-text-select':''">{{v.text}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- IOS安全距离START -->
		<view class="ios-aq"></view>
		<!-- IOS安全距离END -->
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	export default {
		name: "tabbar",
		props:["index"],
		data() {
			return {
			
				tabbarIndex: 0,
				data: [{
						text: "首页",
						iconPath: "../../static/tabbar/1.png",
						selectedIconPath: "../../static/tabbar/2.png",
						pagePath: "/pages/index/index"
					},
					{
						text: "订单",
						iconPath: "../../static/tabbar/3.png",
						selectedIconPath: "../../static/tabbar/4.png",
						pagePath: "/pages/work/work"
					},
					{
						text: "",
						iconPath: "",
						selectedIconPath: "",
						pagePath: "/pages/clockIn/clockIn"
					},
					{
						text: "消息",
						iconPath: "../../static/tabbar/5.png",
						selectedIconPath: "../../static/tabbar/6.png",
						pagePath: "/pages/message/message"
					},
					{
						text: "我的",
						iconPath: "../../static/tabbar/7.png",
						selectedIconPath: "../../static/tabbar/8.png",
						pagePath: "/pages/my/my"
					},
				]
			};
		},
		computed: {
			...mapState([
				'role'
			]),
		
		},
		mounted() {
			this.tabbarIndex = this.index
		
			uni.hideTabBar()
		},

		methods: {
			tabbarItemClick(v, k) {
				console.log(this.role)
				if(k==1&&(this.role==2||this.role==3)){
					this.showToast('暂未开放')
					return
				}
				// if(this.tabbarIndex == k){
				// 	return
				// }
				// this.tabbarIndex = k
				uni.switchTab({
					url: v.pagePath
				})
			},
			midClick() {
				if(this.role==1||this.role==0){
					// uni.switchTab({
					// 	url: '/pages/clockIn/clockIn'
					// })
				}else{
					this.showToast('暂未开放')
					return
				}
				
			},

		}
	}
</script>

<style lang="scss" scoped>
	page,
	block,
	view,
	scroll-view,
	swiper,
	movable-view,
	icon,
	text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	picker,
	picker-view,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	image,
	video,
	map,
	canvas,
	contact-button,
	cover-image,
	cover-view {
		box-sizing: border-box;
	}

	.tabbar {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.ios-aq {
			height: env(safe-area-inset-bottom);
			background-color: #FFFFFF;
		}

		.tabbar-bg-box {
			width: 100%;
			height: 148rpx;
			position: relative;

			.tabbar-bg {
				width: 100%;
				height: 100%;
			}

			.mid-icon {
				position: absolute;
				top: 16rpx;
				left: 50%;
				transform: translateX(-50%);
				// border-radius: 999px;
				width: 92rpx;
				height: 122rpx;
				// background-color: #007AFF;
				// padding: 30rpx;
				z-index: 10;

				image {
					margin-top: 12;
					width: 92rpx;
					height:92rpx
					// width: 100%;
					// height: 100%;
				}
				.dk{
					text-align: center;
					margin-top: -6rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #8F8985;
				}
				.dk-select {
						text-align: center;
						margin-top: -6rpx;
						font-weight: 400;
						font-size: 22rpx;		
					color: #ED6F1A;
				}
			}


			.tabbar-box {
				width: 100%;
				height: 96rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;

				.tabbar-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.tabbar-icon {
						width: 54rpx;
						height: 54rpx;
						padding: 2px;
						/*  */
					}

					.tabbar-text {
						color: #737373;
						margin-top: 6rpx;
						line-height: 1;
						font-size: 24rpx;
					}

					.tabbar-text-select {
				
						color: #ED6F1A;
					}
				}
			}
		}
		
		
	}
</style>
